<template>
    <div class="detail">
        <div class="title">
            <h1>就诊人详情</h1>
        </div>
        <div class="content">
            <div class="subTitle">
                就诊人信息
            </div>
            <div class="info">
                <el-descriptions class="description" :column="1">
                    <el-descriptions-item label="姓名 ：">{{ patientData?.name }}</el-descriptions-item>
                    <el-descriptions-item label="证件类型 ：">{{ patientData?.param.certificatesTypeString
                        }}</el-descriptions-item>
                    <el-descriptions-item label="证件号码 ：">{{ patientData?.certificatesNo }}</el-descriptions-item>
                    <el-descriptions-item label="性别 ：">{{ patientData?.sex == 1 ? '男' : '女' }}</el-descriptions-item>
                    <el-descriptions-item label="出生日期 ：">{{ patientData?.birthdate }}</el-descriptions-item>
                    <el-descriptions-item label="手机号码 ：">{{ patientData?.phone }}</el-descriptions-item>
                    <el-descriptions-item label="婚姻状况 :">{{ patientData?.isMarry == 1 ? '已婚' : '未婚'
                        }}</el-descriptions-item>
                    <el-descriptions-item label="当前住址 :">{{ patientData?.param.provinceString }}/{{
                        patientData?.param.cityString }}/{{ patientData?.param.districtString }}</el-descriptions-item>
                    <el-descriptions-item label="详细地址 :">{{ patientData?.address }}</el-descriptions-item>
                </el-descriptions>
                <div class="btn">
                    <el-button style="margin-right: 10px;" size="large" type="danger"
                        @click="deletePatient">删除就诊人</el-button>
                    <el-button size="large" type="primary" @click="editHandle">修改就诊人</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { usePatient } from '../composables/usePatient';
import { ElMessage, ElMessageBox } from 'element-plus';
import { deletePatientAPI } from '@/api/user';

let { patientData, getPatient } = usePatient()

let $router = useRouter()
let $route = useRoute()

onMounted(() => getPatient($route.query.id as string))

const editHandle = () => {
    $router.push(`/user/add?id=${$route.query.id}`)
}
const deletePatient = () => {
    ElMessageBox.confirm(
        `确定要删除当前就诊人${patientData.value?.name}吗?`,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let res: any = await deletePatientAPI($route.query.id as string)
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: "删除成功！"
                })
                $router.back()
            } else {
                ElMessage({
                    type: 'error',
                    message: "删除失败！"
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })
}
</script>

<style scoped lang="scss">
.detail {

    .title {
        h1 {
            font-weight: bold;
        }
    }

    .content {

        .subTitle {
            letter-spacing: 1px;
            color: #999;
            margin-top: 80px;
            display: flex;
            align-items: center;

            &::before {
                display: inline-block;
                content: '';
                height: 14px;
                width: 4px;
                background: #4990f1;
                margin-right: 6px;
                border-radius: 2px;
            }
        }

        .info {
            margin-top: 20px;

            ::v-deep .el-descriptions__cell {
                padding-bottom: 22px !important;
            }

            ::v-deep .el-descriptions__label {
                color: #999;
            }

            .description {
                display: flex;
                justify-content: center;
                color: #999;
                padding-bottom: 30px;

                span {
                    color: #4490f1;
                    font-weight: bold;
                }
            }

            .btn {
                display: flex;
                justify-content: center;
            }
        }
    }
}
</style>